<script setup>
import { ElMessage, ElMessageBox } from 'element-plus';

const prop = defineProps({
  fileList: {
    type: Array,
    default: () => [
      {
        name: 'element-plus-logo.svg',
        url: 'https://element-plus.org/images/element-plus-logo.svg',
      },
      {
        name: 'element-plus-logo2.svg',
        url: 'https://element-plus.org/images/element-plus-logo.svg',
      },
    ],
  },
  action: {
    type: String,
    default: 'https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15',
  },
  limit: {
    type: Number,
    default: 3,
  },
  multiple: {
    type: Boolean,
    default: true,
  },
  tip: {
    type: String,
  },
});

const { fileList, action, tip, limit } = toRefs(prop);

const handleRemove = (file, uploadFiles) => {
  console.log(file, uploadFiles);
};
const handlePreview = (uploadFile) => {
  console.log(uploadFile);
};
const handleExceed = (files, uploadFiles) => {
  ElMessage.warning(`限制${limit.value}个文件, 您选择当前了${files.length}文件, 还能选择${uploadFiles.length}个文件`);
};
const beforeRemove = uploadFile => ElMessageBox.confirm(`是否删除${uploadFile.name} ?`).then(
  () => true,
  () => false,
);
</script>

<template>
  <el-upload
    v-model:file-list="fileList"
    class="upload"
    :action="action"
    :limit="limit"
    :multiple="multiple"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    :on-exceed="handleExceed"
  >
    <slot></slot>
    <template #tip>
      <div class="el-upload__tip">
        {{ tip }}
      </div>
    </template>
  </el-upload>
</template>

<style lang="scss" scoped>
.upload {
  :deep(.el-upload-list__item) {
    .el-upload-list__item-info {
      margin: 0;
    }
    .el-upload-list__item-name {
      padding: 0;
    }
  }
}
</style>
